import React, { Component } from 'react';
import FlowGrid from '../flow-grid'
const { FlowCol } = FlowGrid;
import fastFlowService from './fast-flow.service'

class FastFlow extends Component {

  colWidth = 300;

  id = 100;

  //在下方加一个节点
  onAddChild = id => {
    const { nodesTree } = this.props;
    let targetNodesTree = JSON.parse(JSON.stringify(nodesTree));
    targetNodesTree = fastFlowService.actionById(id, targetNodesTree, {
      name: 'add_child',
      id: this.id++
    }, true);
    this.props.onChange(targetNodesTree);
  };

  //删除一个节点
  onRemove = (id, type, leaves) => {
    const { nodesTree } = this.props;
    let targetNodesTree = JSON.parse(JSON.stringify(nodesTree));
    let path = fastFlowService.getNodePathList(id, nodesTree, []);
    switch(type) {
      case 'condition':
        if(leaves.length > 2) {
          targetNodesTree = fastFlowService.actionById(id, targetNodesTree, {
            name: 'remove_leaf'
          }, true);
          targetNodesTree = fastFlowService.updateSpanByPath(path, targetNodesTree);
        } else {
          targetNodesTree = fastFlowService.mergeTreeByPath(path, targetNodesTree);
        }
        break;
      case 'open':
        targetNodesTree = fastFlowService.actionById(id, targetNodesTree, {
          name: 'remove_tree'
        }, true);
        targetNodesTree = fastFlowService.updateSpanByPath(path, targetNodesTree);
        break;
      default:
        targetNodesTree = fastFlowService.actionById(id, targetNodesTree, {
          name: 'remove_child'
        }, true);
    }
    this.props.onChange(targetNodesTree);
  };

  onAddTree = id => {
    const { nodesTree } = this.props;
    let targetNodesTree = JSON.parse(JSON.stringify(nodesTree));
    let path = fastFlowService.getNodePathList(id, nodesTree, []);
    targetNodesTree = fastFlowService.actionById(id, targetNodesTree, {
      name: 'add_tree',
      ids: [this.id++, this.id++, this.id++, this.id++]
    }, true);
    targetNodesTree = fastFlowService.updateSpanByPath(path, targetNodesTree);
    this.props.onChange(targetNodesTree)
  };

  onAddLeaf = id => {
    const { nodesTree } = this.props;
    let targetNodesTree = JSON.parse(JSON.stringify(nodesTree));
    let path = fastFlowService.getNodePathList(id, nodesTree, []);
    targetNodesTree = fastFlowService.actionById(id, targetNodesTree, {
      name: 'add_leaf',
      id: this.id++
    }, true);
    targetNodesTree = fastFlowService.updateSpanByPath(path, targetNodesTree);
    this.props.onChange(targetNodesTree);
  };

  renderChild = (child, maxSpan, parentLeaves) => {
    const { id, leaves = [], type } = child;
    let spaceSpan = (maxSpan - 1) / 2;
    let children = [];
    let childContent = leaves.length === 0 ? (
      <div style={{ display: 'inline-block' }}>
        {type === 'open' ?
          <button onClick={() => this.onAddLeaf(id)}>添加分支</button> :
          type !== 'end' && (
            <span>
              <button onClick={() => this.onAddChild(id)}>在下面加个节点</button>
              <br/>
              <button onClick={() => this.onAddTree(id)}>在下面加个条件</button>
            </span>
          )}
        <br/>
        {id}
        <br/>
        {
          ['close', 'start', 'end'].indexOf(type) === -1 &&
          <button onClick={() => this.onRemove(id, type, parentLeaves)}>删除此节点</button>
        }
      </div>
    ) : this.renderTree(child);
    if(spaceSpan === 0) {
      children = [<FlowCol span={1} key='main'>{childContent}</FlowCol>];
    } else {
      children = [
        <FlowCol span={spaceSpan} key='left'/>,
        <FlowCol span={1} key='main'>{childContent}</FlowCol>,
        <FlowCol span={spaceSpan} key='right'/>
      ]
    }
    return children;
  };

  renderLeaf = (leaf, leaves) => {
    const { span, children } = leaf;
    return (
      <FlowGrid count={span} width={span * this.colWidth}>
        {children.map(child => this.renderChild(child, span, leaves))}
      </FlowGrid>
    )
  };

  renderTree = tree => {
    const { span, leaves } = tree;
    return (
      <FlowGrid count={span} width={span * this.colWidth}>
        {leaves.map((leaf, i) => <FlowCol span={leaf.span} key={i}>{this.renderLeaf(leaf, leaves)}</FlowCol>)}
      </FlowGrid>
    )
  };

  render() {
    const { nodesTree } = this.props;
    return this.renderTree(nodesTree)
  }

}

export default FastFlow;
